<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用h5的新事件 拖动并替换div</title>
    <style>
        div {
            height: 50px;
            width: 200px;
        }
    </style>
</head>
<body>

<div style="background-color: red" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true"
     ondragstart="drag(event, this)">
    div1!
</div>
<div style="background-color: green" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true"
     ondragstart="drag(event, this)">
    div2!
</div>
<div style="background-color: blue" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true"
     ondragstart="drag(event, this)">
    div3
</div>


<script type="text/javascript">
    function allowDrop(ev) {
        ev.preventDefault();
    }

    var srcdiv = null;

    function drag(ev, divdom) {
        srcdiv = divdom;
        ev.dataTransfer.setData("text/html", divdom.innerHTML);
    }

    function drop(ev, divdom) {
        ev.preventDefault();
        if (srcdiv != divdom) {
            srcdiv.innerHTML = divdom.innerHTML;
            divdom.innerHTML = ev.dataTransfer.getData("text/html");
        }
    }
</script>
</body>
</html>